<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>正常页面</title>
    <script src="script/vue-2.4.0.js"></script>
</head>

<body>
    <div id="app">
        <!-- 步骤3：显示组件 -->
        <Business></Business>
        <Schoolness></Schoolness>
    </div>
    <!-- <template id="bustest">
        
    </template> -->
    <!-- <template id="linkbartem">
        
    </template> -->
    <script>
        const linkbar = {
                template: `<div>
            <a href="#">{{linkname}}</a>&nbsp<a href="#">{{exit}}</a>
        </div>`,
                data() {
                    return {
                        linkname: '回到首页',
                        exit: '退出',
                    }
                }
            }
            //步骤1：定义组件： EL6 const声明是常量，不能够修改
        const Business = {
            //template就是组件的页面的内容
            template: `<div>            
                       <h1>公司名称：{{businessName}}</h1>
                       <h1>公司地址：{{businessAddress}}</h1>    
                       <linkbar></linkbar>           
        </div>`,
            data() {
                //data必须写成这个格式。
                return {
                    businessName: '迪士尼',
                    businessAddress: '上海浦东',
                }
            },
            components: {
                linkbar,
            },
            methods: {},

        }
        const Schoolness = Vue.extend({
            //template就是组件的页面的内容
            template: `<div>
                            <h1>学校名称：{{schoolName}}</h1>
                            <h1>学校地址：{{schoolAddress}}</h1>
                            <linkbar></linkbar>
                            </div>
                            `,
            data() {
                //data必须写成这个格式。
                return {
                    schoolName: '科文学院',
                    schoolAddress: '贾汪潘安湖校区',
                }
            },
            components: {
                linkbar,
            },
            methods: {},
        })

        var vm = new Vue({
            el: '#app',
            data: {},
            //步骤2；注册局部组件
            components: {
                //语法： key:value 组件使用时候名字:定义组件名字 B:Business
                //如果是 Business:Business 使用的名字和定义组件名字 是一样，可以简写 Business,
                Business,
                Schoolness,
            },
        })
    </script>
</body>

</html>